<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="register.css" type="text/css">
</head>
<body>
<div class="login">
    <div class="login_on">注册</div>
    <form id="myform" action="register_action.php" method="post">
        <div id="login_text">
            <label>账号：</label><input type="text" name="zhanghao" class="input"><br><br>
            <label>密码：</label><input type="password" name="password" class="input"><br><br>
            <label>确认密码：</label><input type="password" name="repassword" class="input reinput"><br><br>
            <label>年龄：</label><input type="text" name="age" class="input"><br><br>
            <label>性别：</label><input type="radio" checked="checked" name="sex" value="man">男
                &nbsp;&nbsp;<input type="radio" name="sex" value="woman">女<br><br>
            <label id="message"></label><br><br>

            <button id="login_on_button" type="submit" class="button">注册</button>
            <button type="reset" class="button">重置</button>
        </div>
    </form>
</div>

<script type="text/javascript">
    var messageelement = document.getElementById('message');
    var buttonelement = document.getElementById('login_on_button');
    var formelement = document.getElementById('myform');
    buttonelement.onclick = function (e) {
        var zhanghaoelement = document.querySelector('#login_text input[name=zhanghao]');
        var username = zhanghaoelement.value;
        e.preventDefault();
        if (username == '') {
            messageelement.innerHTML = '账号不能为空！';
            return;
        }
        var passwordelement = document.querySelector('#login_text input[name=password]');
        var password = passwordelement.value;
        if (password == '') {
            messageelement.innerHTML = '密码不能为空！';
            return;
        }
        var repasswordelement = document.querySelector('#login_text input[name=repassword]');
        var repassword = repasswordelement.value;
        if (repassword != password) {
            messageelement.innerHTML = '输入的密码不一致，请重新输入！';
            return;
        }
        var ageelement = document.querySelector('#login_text input[name=age]');
        var age = ageelement.value;
        if (age == '') {
            messageelement.innerHTML = '年龄不能为空！';
            return;
        }
        var checkedElements = document.querySelector('#myform input[name=sex]:checked');
        var sex = checkedElements.value;

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = JSON.parse(this.responseText);
                    if (result.error == 1) {
                        messageelement.innerHTML = result.message;
                    } else {
                        messageelement.innerHTML = "注册成功，5秒后自动返回重新登录！";

                        setTimeout(function () {
                            location.href = 'qq.html';
                        }, 5000);
                    }
                }else{
                    alert('出现错误，请联系管理员');
                }
            }
        }
        xhr.open(formelement.method,formelement.action);
        var data = new FormData();
        data.append('username',username);
        data.append('password',password);
        data.append('age',age);
        data.append('sex',sex);

        xhr.send(data);
    }

</script>

</body>
</html>